<template>
    <div class="font-size-30 height-100 width-100 flex flex-direction-column">
        <zt-table-page ref="tableRef" :api="apiGetDictionaryPage" :searchColumns="searchFormData"
            :tableColumns="columnsData" :moreOperations="operationsConfig">
            <template #topRight>
                <el-button type="primary" v-auth="'codeDictionary_create'" :icon="Plus"
                    @click="handerDictionaryDialog">新增词典</el-button>
            </template>
            <template #moreColumn="{ row, index }">
                <el-button size="small" @click.stop="handleDetails(row)" v-auth="'codeDictionary_detail'">详情</el-button>
                <el-button size="small" type="primary" @click.stop="handleEdit(row)"
                    v-auth="'codeDictionary_modify'">修改</el-button>
                <el-button size="small" type="danger" @click.stop="handleDelete(row)"
                    v-auth="'codeDictionary_delete'">删除</el-button>
            </template>
        </zt-table-page>
        <add-dictionary-dialog v-model="showVisible" :objectValue="objectValue" :currentType="currentType"
            @success="handerReload" />
        <entry-list-dialog v-model="isShowEntery" :objectValue="objectValue" v-if="isShowEntery" />
    </div>
</template>

<script setup>
import {
    Plus
} from '@element-plus/icons-vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import addDictionaryDialog from "./components/add-dictionary-dialog.vue"
import entryListDialog from "./components/entry-list-dialog.vue"
import { apiGetDictionaryPage, apiDeleteCodeDictionary } from "@/api/admin/codeDictionary/api.js"
import { columnsData, searchFormData } from "./configData.js"
const router = useRouter();


// 更多列配置信息
const operationsConfig = {
    title: '操作', //标题
    align: 'center',//居中方式
    width: '240px',//宽度
    fixed: 'right',//固定定位方向
}
const tableRef = ref(null)
// 重新加载 表格数据
async function handerReload() {
    tableRef.value.reload() //调用父组件里面的重载方法
}

const currentType = ref('add') //当前操作类型
const showVisible = ref(false)
const objectValue = ref({})

// 新增代码词典
function handerDictionaryDialog() {
    currentType.value = 'add';
    showVisible.value = true
}
//修改代码词典
function handleEdit(row) {
    currentType.value = 'edit';
    showVisible.value = true
    objectValue.value = row
}
// 控制显示词条列表弹窗
const isShowEntery = ref(false)

//详情
function handleDetails(row) {
    isShowEntery.value = true
    objectValue.value = row
}

// 删除代码词典
const handleDelete = (row) => {
    ElMessageBox.confirm('你是否确认删除该词典')
        .then(() => {
            apiDeleteCodeDictionary({ ids: row.dictId }, '词典删除中').then(res => {
                if (res.success) {
                    ElMessage({
                        message: '代码词典删除成功',
                        type: 'success',
                    })
                    handerReload()
                    return false
                }
                ElMessage({
                    message: res.message,
                    type: 'warning',
                })
            })
        })
}


onMounted(() => {
    // getCodeDictionaryData()
})

</script>

<style lang='scss' scoped></style>